<template>
    <div class="tab-box" v-if="tabShow">
        <van-tabs animated v-model:active="activeTab" @change="goPage">
            <van-tab v-for="item in orderNavTree" :name="item.name" :key="item.name" :title="item.name">
            </van-tab>
        </van-tabs>
    </div>
</template>

<script setup>
import { reactive, ref, onMounted, watch, nextTick } from "vue";
import { menuStore } from "@/stores/menu";
import { vRipple } from "@/utils/directive/waves.ts";
import { useRouter } from "vue-router";

const activeTab = ref("")

const tabShow = ref(false)

const router = useRouter();

const store_menu = menuStore();
const orderNavTree = ref([]);
const routerTilte = ref("");
const goPage = (name) => {
    const routeObj = orderNavTree.value.find((item) => {
        return item.name == name
    })
    router.push({
        path: routeObj.path,
    });
};
watch(
    () => router.currentRoute.value,
    (newValue, oldValue) => {
        var title = newValue.meta.title;
        activeTab.value = title
    },
    { immediate: true }
);
onMounted(() => {
    orderNavTree.value = store_menu.getOrderNavTree;
    routerTilte.value = router.currentRoute.value.meta.title;
    // changeNav(routerTilte.value);
    nextTick(() => {
        tabShow.value = true
    })
    // setTimeout(() => {
    //     tabIns.value.resize()
    // }, 2000);

});
</script>

<style lang="scss" scoped>
::v-deep(.van-tab) {
    font-size: 30px;
}

::v-deep(.van-tabs__line) {
    width: 44px;
    height: 8px;
    opacity: 1;
    border-radius: 10px;
    background: linear-gradient(160.78deg, rgba(0, 160, 252, 1) 0%, rgba(8, 173, 255, 1) 100%);
}
</style>